<template>
  <div class="model3">
    <div ref="chartBox" class="progressBox"></div>
    <div class="name">{{ props.name }}</div>
  </div>
</template>
<script setup lang="ts">
import { watch, onMounted, ref } from 'vue'
import { Gauge } from "@antv/g2plot";
/** @api */
interface Props {
  name: string;
  value: string |number;
}
// 组件传参
const props = withDefaults(defineProps<Props>(), {
  name: '厂区总览',
  value: '0.50',
});
/** @数据 */
const chartBox = ref<HTMLDivElement>();
let gaugeData: Gauge | undefined = undefined;
/** @生命周期 */
onMounted(() => {
  initChart()
})
/** @方法 */
const initChart = () => {
  gaugeData = new Gauge(chartBox.value as HTMLDivElement, {
    percent: Number(props.value),
    // percent: 0.5,
    innerRadius: 0.88,
    startAngle: 0,
    endAngle: 2 * Math.PI,
    range: {
      color: ["#00ffff", '#2d6676']
    },
    indicator: undefined,
    statistic: {
      title: {
        offsetY: 8,
        style: {
          fontSize: '20',
          color: '#fff',
        },
        formatter: () => (Number(props.value) * 100).toFixed(2) + '%',
        // formatter: () => props.value + '',
      },

    },
    gaugeStyle: {
      lineWidth: 20
    }
  });
  gaugeData.render()
}
/** @侦听器 */
watch(() => props.value, (newVal) => {
  if (newVal && gaugeData) {
    gaugeData.changeData(Number(newVal))
  }
})
/** @公共方法 */
</script>
<style lang="scss" scoped>
.model3 {
  display: inline-block;
  width: 100px;
  height: 120px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  // background: url('@/assets/imgs/icon-05.png') no-repeat center 35px;
  // background-size: 77px 35px;
  // text-align: center;
  .progressBox {
    width: 80px;
    height: 80px;

    .percentage-value {
      font-size: 20px;
      color: #FFFFFF;
    }
  }

  .name {
    margin-top: 10px;
    font-size: 16px;
  }

}
</style>